
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        #pic{width:391px;
            height:479px;
            position:relative;
        }
        #p1{height:40px;
            background-color:rgba(255,255,255,0.3);
            position:absolute;
            left:0;
            top:0;
            margin:0;
            width:100%;
            text-align:center;
            line-height:40px;
            color:yellow;
            font-size:22px;
        }
        #p2{height:40px;
            background-color:rgba(255,255,255,0.3);
            position:absolute;
            left:0;
            bottom:0;
            margin:0;
            width:100%;
            text-align:center;
            line-height:40px;
            color:yellow;
            font-size:22px;
        }
        button{
            width: 50px;
            height: 30px;
            margin:20px 20px;
        }
        .active{
            color:#fff;
            background-color:red;
        }
    </style>
</head>
<body>
<div id="button"></div>
<div id="pic">
    <img src="../素材/1.jpg" width="391" height="479"/>
    <p id="p1"></p>
    <p id="p2"></p>
</div>
<script>
    var arr1 = ["../素材/1.jpg","../素材/2.jpg","../素材/3.jpg","../素材/4.jpg"];
    var arr2 = ["少女1","少女2","少女3","少女4"];
    var Div=document.getElementById("button");
    var oP1=document.getElementById("p1");
    var oP2=document.getElementById("p2");
    var links=document.getElementsByTagName("button");
    var Img=document.getElementsByTagName("img")[0];
    oP1.innerHTML = "1/4";
    oP2.innerHTML = arr2[0];
    var str="";
    for(var i=0;i<arr1.length;i++){
        str+="<button>"+"图"+(i+1)+"</button>";
    }
    Div.innerHTML=str;
    links[0].className="active";
    for(var i=0;i<arr1.length;i++){
        links[i].index=i;
        links[i].onclick=function(){
            for(var j=0;j<links.length;j++){
                links[j].className="";
            }
            this.className="active";
            Img.src=arr1[this.index];
            oP1.innerHTML=this.index+1+"/"+arr1.length;
            oP2.innerHTML=arr2[this.index];
        }
    }
</script>
</body>
</html>
